<template>
	<div>
		<h1>router路由</h1>
		<hr />
		<p>在浏览器中点击链接实现导航的方式，叫做“声明式导航”（a标签、router-link标签）</p>
		<!-- <a href="#/R01">R01</a>
		<br />
		<a href="#/R02">R02</a>
		<br />
		<a href="#/R03">R03</a> -->
		<!-- 用router-link代替a标签 -->
		<router-link to="/R01/1">/R01</router-link>
		<br />
		<!-- 在hash地址中，?后边的参数叫做查询参数，可以通过this.$route.query访问 -->
		<router-link to="/R02/2?name=haha&pwd=heiheihei">/R02</router-link>
		<br />
		<router-link to="/R03/3">/R03</router-link>
		
		<router-link to="/R00/">/R00（会进入默认子路由）</router-link>
		<br />
		<router-link to="/R00/R01">/R00/R01</router-link>
		<br />
		<router-link to="/R00/R02">/R00/R02</router-link>
		<br />
		<router-link to="/R00/R03">/R00/R03</router-link>
		<hr />
		<p>通过编程式导航API，导航到指定的页面，叫做“编程式导航”</p>
		<button @click="pushLk">push方法</button>
		<br />
		<button @click="replacelLk">replace方法</button>
		<br />
		<button @click="golLk">go方法（-1）</button>
		<hr />
		<!-- router占位符 -->
		<router-view></router-view>
		
	</div>
</template>

<script>
	export default{
		methods:{
			pushLk(){
				// 会增加一条历史记录（可以退回到之前的页面）
				this.$router.push('/R01/1')
			},
			replacelLk(){
				// 不会增加历史记录（替换掉当前的历史记录）（不能退回到之前的页面）
				this.$router.replace('/R03/3')
			},
			golLk(){
				// 参数为数值（整数），为正数时向前页面，为负数时后退页面
				// 如果后退的层数超过上限，则原地不动
				this.$router.go(-1)
				
				// $router.back()    为后退一层
				// $router.forward() 为前进一层
				
			},
		}
	}
</script>

<style>
</style>